<template>
  <div class="app-container">
    <el-dialog title="上传发票" :visible="visible" @close="cancel">
      <el-form ref="submitForm" :model="formData" :rules="rules">
        <el-form-item label="上传发票" class="uploadPic" prop="file">
          <oss :limit="1" @input="(val) => (formData.file = val)" ossURL="/oss/uploadTranslate"
            :fileType="['png', 'jpg', 'jpeg']" :value="formData.file">
          </oss>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" v-hasPermi="['userManager:user:edit']" @click="cancel">取消</el-button>
          <el-button type="primary" v-hasPermi="['userManager:user:edit']" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { updateTranslate } from '@/api/translate/translate'
export default {
  name: 'UploadInvoice',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          this.formData.id = this.id
        }
      },
    }
  },
  components: {
    oss: () => import('@/components/ImageUpload/oss.vue'),
  },
  data() {
    return {
      formData: {
        id: 0,
        file: undefined,
      },
      rules: {
        file: [{ required: true, message: '请上传发票', trigger: 'change' }]
      }
    }
  },
  methods: {

    submitForm() {
      this.$refs['submitForm'].validate((valid) => {
        if(!valid) return;
        updateTranslate(this.formData, this).then(res => {
          this.$emit('close', this.formData, false); // 关闭弹窗
          this.formData.file = undefined;
        });
      })
    },

    cancel() {
      this.$emit('close', null, false);
      this.formData.file = undefined;
    }
  }
}
</script>

<style>
.uploadPic .el-upload-dragger {
  width: 150px;
  height: 150px;
}
</style>
